<template>
  <el-dialog v-model="visible" @close="closePage" title="模型设计" fullscreen>
      <iframe src="https://goldsubmarine.github.io/workflow-bpmn-modeler/cdn/0.2.8/" id="myFrame" frameborder="0"
          width="100%" height="800px">
      </iframe>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryBpmnXmlReq } from '@/api/workflow/model/index.js'

const visible = ref(false)
const open = (row) => {
  initBpmnModeler();
  visible.value = true;
}

defineExpose({
  open,
})

// 关闭dialog
const closePage = () => {
  visible.value = false;
}

const initBpmnModeler = () => {
  // 使用 onMounted 确保在组件挂载后执行操作
  onMounted(() => {
      // 获取到 iframe
      let myFrame = document.getElementById("myFrame");

      // 注册监听 message 事件
      window.addEventListener("message", (event) => {
          console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
      });

      // 注册 iframe 的 load 事件
      myFrame.addEventListener('load', () => {
          let postMsg = {
              xml: "", // 后端查询到的 xml，新建则为空串
              users: [
                  { name: "张三1", id: "zhangsan" },
                  { name: "李四1", id: "lisi" },
                  { name: "王五1", id: "wangwu" },
              ],
              groups: [
                  { name: "web组1", id: "web" },
                  { name: "java组1", id: "java" },
                  { name: "python组1", id: "python" },
              ],
              categorys: [
                  { name: "OA1", id: "oa" },
                  { name: "财务1", id: "finance" },
              ],
              isView: false
          }
          // 设置初始化值
          myFrame.contentWindow.postMessage(postMsg, "*")
      });
  });
}
</script>

<style></style>
